<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
 <link rel="shortcut icon" type="image/ico"
    href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">

<link rel="stylesheet" href="css/datatables/media/css/dataTables.bootstrap.css">
<!-- BOOTSTRAP-->
		<script src="js/bootstrap/dist/js/bootstrap.js"></script>
		<!-- STORAGE API-->
		<script src="js/jQuery-Storage-API/jquery.storageapi.js"></script>
<link rel="stylesheet" type="text/css"
	href="css/datatables/media/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript"
	src="js/jquery/dist/jquery.js"></script>
<script type="text/javascript" language="javascript"
	src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" class="init">

	var table;
	$(document).ready(function() {
		table = $('#example').DataTable({
			"pagingType" : "full_numbers",//设置分页控件的模式
			searching : false,//屏蔽datatales的查询框
			aLengthMenu : [3],//设置一页展示10条记录
			bRetrieve:true,
			"bLengthChange" : false,//屏蔽tables的一页展示多少条记录的下拉列表
			"ordering" : false,//屏蔽排序
			"oLanguage" : { //对表格国际化
				"sLengthMenu" : "每页显示 _MENU_条",
				"sZeroRecords" : "没有找到符合条件的数据",
				//  "sProcessing": "&lt;img src=’./loading.gif’ /&gt;",  
				"sInfo" : "当前第 _START_ - _END_ 条　共计 _TOTAL_ 条",
				"sInfoEmpty" : "木有记录",
				"sInfoFiltered" : "(从 _MAX_ 条记录中过滤)",
				"sSearch" : "搜索：",
				"oPaginate" : {
					"sFirst" : "首页",
					"sPrevious" : "前一页",
					"sNext" : "后一页",
					"sLast" : "尾页"

				}
			},
			"processing" : true, //打开数据加载时的等待效果
			"serverSide" : true,//打开后台分页
			
			"ajax" : {
				"url" : "sysuser/list",
				"dataSrc" : "aaData",
				"data" : function(d) {
					d.aduserRealname = $('#aduserRealname').val();
					//添加额外的参数传给服务器
					//d.aduserRealname = aduserRealname;
				}
			},
			"columns" : [ 
			             {"data" : "aduserId"}, 
			             {"data" : "aduserName"}, 
			             {"data" : "aduserRealname"},
			             { "data": null, "title":"操作","defaultContent": "<button class='edit-btn' type='button'>编辑</button>"}
	]});
		$("#example tbody").on("click",".edit-btn",function(){
			var data = table.row($(this).parents('tr')).data();
			//console.log('data', data);
			//alert(data['name'] + "'bianji s salary is: " + data['start_date']);
			$('#edit-modal').modal();
	    });
	});
	function search() {
		table.ajax.reload();
	}
	
	
</script>
</head>
<body class="dt-example">
	<div>
		<div>
			<label>姓名：</label><input type="text" id="aduserRealname"> 
			<label>身份证号：</label><input type="text" id="level2"> 
			<input type="button" onclick="search()" value="查询">
		</div>
		<table id="example" class="display" cellspacing="0" width="100%">
			<thead>
				<tr>
					<th>用户编号</th>
					<th>用户名称</th>
					<th>真实姓名</th>
					<th>操作</th>
				</tr>
			</thead>
		</table>
	</div>
	<!--Modify device-->
			<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="modal-nofooter-label">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="modal-label">修改设备</h4>
						</div>
						<div class="modal-body" style="height: 240px;overflow-y: auto;">
							<form class="form-horizontal form-stripe">
								<div class="form-group">
									<label for="hex-colorpicker" class="col-sm-2 control-label">设备名称</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="hex-colorpicker" value="0066BA">
									</div>
								</div>
								<div class="form-group">
									<label for="rgba-colorpicker" class="col-sm-2 control-label">设备类型</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="rgba-colorpicker" value="设备类型">
									</div>
								</div>
								<div class="form-group">
									<label for="all-formats-colorpicker" class="col-sm-2 control-label">设备序号</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="all-formats-colorpicker" value="设备序号">
									</div>
								</div>
								<div class="form-group">
									<label for="all-formats-colorpicker" class="col-sm-2 control-label">设备ip</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="all-formats-colorpicker" value="设备ip">
									</div>
								</div>
								<div class="form-group">
									<label for="all-formats-colorpicker" class="col-sm-2 control-label">设备备注</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="all-formats-colorpicker" value="设备备注">
									</div>
								</div>
								<div class="form-group">
									<label for="all-formats-colorpicker" class="col-sm-2 control-label">设备型号</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="all-formats-colorpicker" value="设备型号">
									</div>
								</div>
								<div class="form-group">
									<label for="all-formats-colorpicker" class="col-sm-2 control-label">隶属项目</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="all-formats-colorpicker" value="隶属项目">
									</div>
								</div>
							</form>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
							<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						</div>
					</div>
				</div>
			</div>
</body>
</html>